<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <title>用户管理列表</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="../../static/bootstrap/js/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script src="../../static/bootstrap/js/static-resources.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-select/1.13.7/js/bootstrap-select.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/js/i18n/defaults-zh_CN.min.js"></script>
<script type="text/javascript">
    $(function () {
        $(".footerPage").load("../footer.html");
        let DEFAULT_DATA_MODEL = {
            "actorno": "",
            "enname": "",
            "actorname": "",
            "nickname": "",
            "state": "",
            "password": "",
            "startdate": "",
            "passwvalda": "",
            "firedate": "",
            "birthday": "",
            "telnum": "",
            "idcardno": "",
            "allowopersys": "",
            "lastlogdat": "",
            "creater": "",
            "creattime": "",
            "usermail": "",
            "wrongpinnum": "",
            "isadmin": "",
            "isadmin": "",
            "memo": "",
            "ipmask": "",
            "orderno": "",
            "question": "",
            "answer": "",
            "orgid": "",
            "depno": "",
            "sessionId": "",
            "rank": "",
            "parentactorno": "",
            "deviceNo": "",
            "menuConfig": "",
            "isPriorityShow": "",
            "ifTogetherWf": "",
            "opModel": "",
            "mobNum": "",
        };
        var vm = new Vue({
            el: '#app',
            mixins: [window.$DEFAULT_MIXIN],
            data: {

                queryParam: {
                    actorno: "",
                    actorname: "",
                },
                pageInfo: {
                    page: 1,
                    size: 10,
                    total: 0
                },
                result_list:[],
                list: [],
                selected: null,

                show: false,
                readonly: false,
                loading: false,
                modelTitle: "",
                dataObj: {},
                opType: "",
            },
            watch: {
                opType(val, old) {
                    if (val == "add") {
                        this.modelTitle = "用户管理新增";
                        this.show = true;
                        this.readonly = false;
                        this.dataObj = $.extend({}, DEFAULT_DATA_MODEL);
                    } else if (val == "update") {
                        this.modelTitle = "用户管理修改";
                        this.show = true;
                        this.readonly = false;
                        this.dataObj = $.extend({}, this.selected);
                    } else if (val == "view") {
                        this.modelTitle = "用户管理详情";
                        this.show = true;
                        this.readonly = true;
                        this.dataObj = $.extend({}, this.selected);
                    }
                },
                /**
                 * 监听后端的返回结果集
                 */
                result_list:function () {
                    this.$nextTick(function () {
                        $('#sel').selectpicker('refresh');
                    })
                },
                /**
                 * 监听已经选择的结果集
                 */
                select_list:function () {
                    console.log(this.select_list)
                }
            },
            computed: {
                paths() {
                    return [
                        {text: '首页', href: '/index.html'},
                        {text: '系统管理', href: '#'},
                        {text: '组织机构', href: '#'},
                        {text: '用户管理', href: 'admin/SUserList.html'},
                    ]
                },
                fields() {
                    return [
                        {key: 'actorno', label: '用户码', sortable: false},
                        {key: 'enname', label: '选项值', sortable: false},
                        {key: 'actorname', label: '用户名称', sortable: false},
                        {key: 'nickname', label: '昵称', sortable: false},
                        {key: 'state', label: '状态', sortable: false},
                        {key: 'password', label: '密码', sortable: false},
                        {key: 'startdate', label: '启用日期', sortable: false},
                        {key: 'passwvalda', label: '密码', sortable: false},
                        {key: 'firedate', label: '解雇日期', sortable: false},
                        {key: 'birthday', label: '生日', sortable: false},
                        {key: 'telnum', label: '联系电话', sortable: false},
                        {key: 'idcardno', label: '身份证号码', sortable: false},
                        {key: 'allowopersys', label: '允许操作的系统', sortable: false},
                        {key: 'lastlogdat', label: '最后登陆日期', sortable: false},
                        {key: 'creater', label: '创建人', sortable: false},
                        {key: 'creattime', label: '创建时间', sortable: false},
                        {key: 'usermail', label: '邮箱', sortable: false},
                        {key: 'wrongpinnum', label: '密码输入错误次数', sortable: false},
                        {
                            key: 'isadmin', label: '是否管理员', sortable: false,
                            formatter: function (value, key, item) {
                                return formatter_STD_PUB_YN(value)
                            }
                        },
                        {key: 'memo', label: '备注', sortable: false},
                        {key: 'ipmask', label: '用户IP掩码', sortable: false},
                        {key: 'orderno', label: '排序字段', sortable: false},
                        {key: 'question', label: '用户防伪问题', sortable: false},
                        {key: 'answer', label: '用户防伪答案', sortable: false},
                        {key: 'orgid', label: '组织号', sortable: false},
                        {key: 'depno', label: '部门编号', sortable: false},
                        {key: 'sessionId', label: '当前登录会话ID', sortable: false},
                        {key: 'rank', label: '职级', sortable: false},
                        {key: 'parentactorno', label: '主账号用户码', sortable: false},
                        {key: 'deviceNo', label: '未知', sortable: false},
                        {key: 'menuConfig', label: '未知', sortable: false},
                        {key: 'isPriorityShow', label: '是否优先显示', sortable: false},
                        {key: 'ifTogetherWf', label: '是否合并待办', sortable: false},
                        {key: 'opModel', label: '操作模式', sortable: false},
                        {key: 'mobNum', label: '手机号码', sortable: false}
                    ]
                },
                STD_PUB_YN(){
                    return STD_PUB_YN;
                },
                USER_STATUS(){
                    return USER_STATUS;
                }
            },
            methods: {
                onRowSelected(items) {
                    this.selected = items[0];
                },
                submitQry(page) {
                    if (page == true) {
                        this.pageInfo.page = 1;
                    }
                    let self = this;
                    JLEUtil.requestForm("api/s/users", "POST", null, $.extend({}, self.queryParam, self.pageInfo),
                        function (data, textStatus, jqXHR) {
                            self.list = data.rows;
                            self.pageInfo.total = data.total;
                        },
                        function (jqXHR, textStatus, errorThrown) {

                        });
                },
                resetContent() {
                    this.queryParam.actorname = "";
                    this.queryParam.actorno = "";
                },
                toAddPage() {
                    this.$bvModal.show('bv-modal-example')
                    this.opType = "add";
                },
                toModifyRecord() {
                    if (!this.selected) {
                        this.$bvToast.toast(`请选择一行数据`, {
                            title: '提示 ',
                            toaster: 'b-toaster-top-center',
                            solid: true
                        });
                        return;
                    }
                    this.$bvModal.show('bv-modal-example')
                    this.opType = "update";
                },
                delRecord() {
                    if (!this.selected) {
                        this.$bvToast.toast(`请选择一行数据`, {
                            title: '提示 ',
                            toaster: 'b-toaster-top-center',
                            solid: true
                        });
                        return;
                    }
                    if ('0' == this.selected.state) {
                        this.$bvToast.toast(`${this.selected.actorname}，已注销，勿重复操作！`, {
                            title: '提示 ',
                            toaster: 'b-toaster-top-center',
                            solid: true
                        });
                        return;
                    }
                    let self = this;
                    this.$bvModal.msgBoxConfirm(`你确定要注销【${this.selected.actorname}】这个用户?`, {
                        title: '注销提示',
                        size: 'sm',
                        buttonSize: 'sm',
                        okVariant: 'success',
                        headerClass: 'p-2 border-bottom-0',
                        footerClass: 'p-2 border-top-0',
                        cancelTitle: "取消",
                        okTitle: "确定",
                        centered: true
                    }).then(value => {
                        if (!value) return;
                        JLEUtil.request("api/s/user", "DELETE", null, {actorno: this.selected.actorno},
                            function (data, textStatus, jqXHR) {
                                self.$bvToast.toast(`${self.selected.actorno}，注销成功！`, {
                                    title: '提示 ',
                                    toaster: 'b-toaster-top-center',
                                    solid: true
                                });
                                self.submitQry(true);
                            },
                            function (jqXHR, textStatus, errorThrown) {

                            });
                    })
                },
                toViewPage() {
                    if (!this.selected) {
                        this.$bvToast.toast(`请选择一行数据`, {
                            title: '提示 ',
                            toaster: 'b-toaster-top-center',
                            solid: true
                        });
                        return;
                    }
                    this.$bvModal.show('bv-modal-example')
                    this.opType = "view";
                },
                saveInfo() {

                    let requestOptions = {
                        url: "api/s/user",
                        type: "POST",
                        dataObj: this.dataObj,
                        success: (data) => {
                            this.$bvToast.toast(data.message, {
                                title: '提示 ',
                                toaster: 'b-toaster-top-center',
                                solid: true
                            });
                            this.loading = false;
                            this.closeModel();
                            this.submitQry();
                        },
                        error: (jqXHR, textStatus, errorThrown) => {
                            this.loading = false;
                            this.$bvToast.toast("提交失败", {
                                title: '提示 ',
                                toaster: 'b-toaster-top-center',
                                solid: true
                            });
                        }
                    };
                    if (this.opType == "add") {
                        requestOptions.type = "POST";
                    } else if (this.opType == "update") {
                        requestOptions.type = "PUT";
                    }

                    this.loading = true;
                    let self = this;
                    this.$refs.form.validate().then(success => {
                        if (!success) {
                            this.loading = false;
                            return;
                        }
                        JLEUtil.request(requestOptions.url, requestOptions.type, null,
                            requestOptions.dataObj,
                            requestOptions.success,
                            requestOptions.error
                        );
                    });
                },
                //初始化获取操作系统列表
                init(){
                    let self = this;
                    $.ajax({
                        type: 'POST',
                        url: '../../api/s/subs/info/all',
                        data: {
                        },
                        success: function(data) {
                            if(data){
                                //将获取的数组赋值给result_list，用于生成选项
                                self.result_list = data.rows;
                                $("#allowopersys").selectpicker({
                                    multiple: true,
                                    actionsBox: true
                                })
                            }
                        }
                    });
                },
                //重置密码
                toResetPassword(){
                    if (!this.selected) {
                        this.$bvToast.toast(`请选择一行数据`, {
                            title: '提示 ',
                            toaster: 'b-toaster-top-center',
                            solid: true
                        });
                        return;
                    }
                    this.$bvModal.msgBoxConfirm(`你确定要重置【${this.selected.actorname}】这个用户的密码?`, {
                        title: '重置密码提示',
                        size: 'sm',
                        buttonSize: 'sm',
                        okVariant: 'success',
                        headerClass: 'p-2 border-bottom-0',
                        footerClass: 'p-2 border-top-0',
                        cancelTitle: "取消",
                        okTitle: "确定",
                        centered: true
                    }).then(value => {
                        let self = this;
                        JLEUtil.request("api/user/reset/pwd", "POST", null, {actorno: self.selected.actorno},
                            function (data, testStatus, jqXHR) {
                                self.$bvToast.toast(`密码重置成功！`, {
                                    title: '提示 ',
                                    toaster: 'b-toaster-top-center',
                                    solid: true
                                });
                                self.submitQry(true);
                            },
                            function (jqXHR, textStatus, errorThrown) {

                            });
                        })
                },
                //设置角色
                toSetRoles(){
                    if (!this.selected) {
                        this.$bvToast.toast(`请选择一行数据`, {
                            title: '提示 ',
                            toaster: 'b-toaster-top-center',
                            solid: true
                        });
                        return;
                    }
                    var url = "SUserSetRoles.html?&actorno=" + this.selected.actorno;
                    JLEUtil.linkNewPage(url)
                },
                closeModel() {
                    this.show = false;
                    this.modelData = {};
                    this.opType = "";
                }
            },
            mounted() {
                this.submitQry(true);
                this.init();
            }
        })
    });
</script>
</head>
<body>
<div class="headerPage"></div>
<div id="app">
    <div class="container-fluid mt-3">
        <div class="row">
            <div class="col-sm-12 search-box">
                <form role="form" style="text-align: right"  id="formData" class="row">
                    <div class="form-group col-sm-4">
                        <b-form-group label-cols="4" label-cols-lg="4" label="用户码">
                            <b-form-input size="sm" v-model="queryParam.actorno"></b-form-input>
                        </b-form-group>
                    </div>
                    <div class="form-group col-sm-4">
                        <b-form-group label-cols="4" label-cols-lg="4" label="用户名称">
                            <b-form-input size="sm" v-model="queryParam.actorname"></b-form-input>
                        </b-form-group>
                    </div>
                    <div class="control-group col-sm-2">
                        <div class="text-center">
                            <b-button variant="primary" @click="submitQry(true)">&nbsp;&nbsp;查&nbsp;&nbsp;询&nbsp;&nbsp;</b-button>
                            <b-button variant="secondary" @click="resetContent">&nbsp;&nbsp;重&nbsp;&nbsp;置&nbsp;&nbsp;</b-button>
                        </div>
                    </div>
                </form>
                <div class="row"></div>
                <!-- table -->
            </div>
            <div class="form-group col-sm-12 ">
                <div class="text-left">
                    <b-button variant="primary" @click="toAddPage">&nbsp;&nbsp;新&nbsp;&nbsp;增&nbsp;&nbsp;</b-button>
                    <b-button variant="primary" @click="toModifyRecord">&nbsp;&nbsp;修&nbsp;&nbsp;改&nbsp;&nbsp;</b-button>
                    <b-button variant="primary" @click="delRecord">&nbsp;&nbsp;注&nbsp;&nbsp;销&nbsp;&nbsp;</b-button>
                    <b-button variant="primary" @click="toViewPage">&nbsp;&nbsp;查&nbsp;&nbsp;看&nbsp;&nbsp;</b-button>
                    <b-button variant="primary" @click="toSetRoles">设置角色</b-button>
                    <b-button variant="primary" @click="toResetPassword">重置密码</b-button>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <!-- table start -->
        <b-table responsive hover selectable bordered fixed striped small
                 show-empty empty-text="查询列表为空"
                 @row-selected="onRowSelected"
                 selected-variant="primary"
                 select-mode="single" :fields="fields" :items="list">
            <template v-slot:table-colgroup="scope">
                <col
                        v-for="field in scope.fields"
                        :key="field.key"
                        :style="{ width: '180px' }"
                >
            </template>
            <template v-slot:cell()="data">
                <div class="text-truncate">{{ data.value }}</div>
            </template>
        </b-table>
        <div class="float-right">
            <b-pagination
                    v-model="pageInfo.page"
                    :total-rows="pageInfo.total"
                    :per-page="pageInfo.size"
                    @change="submitQry"
            ></b-pagination>
        </div>
        <!-- table end -->
    </div>

    <b-modal v-model="show" id="bv-modal-example" :title="modelTitle" size="xl"
             scrollable
             no-close-on-backdrop
             no-close-on-esc>
        <b-container fluid>
            <validation-observer ref="form">
                <form role="form">
                    <div class="row">
                        <div class="col-sm-6">
                            <validation-provider name="actorno" :rules="{ required: true }" v-slot="validationContext">
                                <b-form-group label="用户码" label-cols-sm="4" label-align-sm="right">
                                    <b-form-input type="text" v-model="dataObj.actorno" :readonly="opType != 'add' || readonly"
                                                  :state="getValidationState(validationContext)"
                                                  name="actorno" placeholder="用户码"></b-form-input>
                                    <b-form-invalid-feedback >用户码不能为空</b-form-invalid-feedback>
                                </b-form-group>
                            </validation-provider>
                        </div>
                        <div class="col-sm-6">
                            <validation-provider name="actorname" :rules="{ required: true }" v-slot="validationContext">
                                <b-form-group label="用户名称" label-cols-sm="4" label-align-sm="right">
                                    <b-form-input type="text" v-model="dataObj.actorname"
                                                  :state="getValidationState(validationContext)"
                                                  name="actorname" placeholder="用户名称"  :readonly="readonly"></b-form-input>
                                    <b-form-invalid-feedback >用户名称不能为空</b-form-invalid-feedback>
                                </b-form-group>
                            </validation-provider>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <b-form-group label="昵称" label-cols-sm="4" label-align-sm="right">
                                <b-form-input type="text" v-model="dataObj.nickname" name="nickname" placeholder="昵称"  :readonly="readonly"></b-form-input>
                            </b-form-group>
                        </div>
                        <div class="col-sm-6">
                            <b-form-group label="身份证号码" label-cols-sm="4" label-align-sm="right">
                                <b-form-input type="text" v-model="dataObj.idcardno" name="idcardno" placeholder="身份证号码" :readonly="readonly"></b-form-input>
                            </b-form-group>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <b-form-group label="生日" label-cols-sm="4" label-align-sm="right">
                                <b-laydate v-model="dataObj.birthday" name="birthday" placeholder="生日" :disabled="readonly"></b-laydate>
                            </b-form-group>
                        </div>
                        <div class="col-sm-6">
                            <b-form-group label="联系电话" label-cols-sm="4" label-align-sm="right">
                                <b-form-input type="text" v-model="dataObj.telnum" name="telnum" placeholder="联系电话" :readonly="readonly"></b-form-input>
                            </b-form-group>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <b-form-group label="邮箱" label-cols-sm="4" label-align-sm="right">
                                <b-form-input type="text" v-model="dataObj.usermail" name="usermail" placeholder="邮箱" :readonly="readonly"></b-form-input>
                            </b-form-group>
                        </div>
                        <div class="col-sm-6">
                            <b-form-group label="职级" label-cols-sm="4" label-align-sm="right">
                                <b-form-input type="text" v-model="dataObj.rank" name="rank" placeholder="职级" :readonly="readonly"></b-form-input>
                            </b-form-group>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <validation-provider name="orgid" :rules="{ required: true }" v-slot="validationContext">
                                <b-form-group label="机构号" label-cols-sm="4" label-align-sm="right">
                                    <b-form-input type="text" v-model="dataObj.orgid"
                                                  :state="getValidationState(validationContext)"
                                                  name="orgid" placeholder="机构号"  :readonly="readonly"></b-form-input>
                                    <b-form-invalid-feedback >机构号不能为空</b-form-invalid-feedback>
                                </b-form-group>
                            </validation-provider>
                        </div>
                        <div class="col-sm-6">
                            <b-form-group label="部门编号" label-cols-sm="4" label-align-sm="right">
                                <b-form-input type="text" v-model="dataObj.depno" name="depno" placeholder="部门编号" :readonly="readonly"></b-form-input>
                            </b-form-group>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <b-form-group label="是否管理员" label-cols-sm="4" label-align-sm="right">
                                <b-form-select type="text" v-model="dataObj.isadmin" name="isadmin"  :disabled="readonly"
                                               :options="STD_PUB_YN"
                                               value-field="enname" text-field="cnname"></b-form-select>
                            </b-form-group>
                        </div>
                        <div class="col-sm-6">
                            <b-form-group label="状态" label-cols-sm="4" label-align-sm="right">
                                <b-form-select type="text" v-model="dataObj.state" name="state" placeholder="状态"  :disabled="readonly"
                                               :options="USER_STATUS"
                                               value-field="enname" text-field="cnname"></b-form-select>
                            </b-form-group>
                        </div>
                        <div class="col-sm-6">
                            <validation-provider name="orgid" :rules="{ required: true }" v-slot="validationContext">
                                <b-form-group label="允许操作的系统" label-cols-sm="4" label-align-sm="right">
                                    <b-form-select  type="text" v-model="dataObj.allowopersys" name="allowopersys" placeholder="允许操作的系统"
                                                    :state="getValidationState(validationContext)"
                                                    :disabled="readonly">
                                        <option v-bind:value="item.subsCode" v-for="item in result_list">
                                            {{item.subsName}}
                                        </option>
                                    </b-form-select>
                                </b-form-group>
                            </validation-provider>
                        </div>
                        <div class="col-sm-6">
                            <b-form-group label="备注" label-cols-sm="4" label-align-sm="right">
                                <b-form-input type="text" v-model="dataObj.memo" name="memo" placeholder="备注" :readonly="readonly"></b-form-input>
                            </b-form-group>
                        </div>
                    </div>
                </form>
            </validation-observer>
        </b-container>
        <template v-slot:modal-footer>
            <div class="control-group col-sm-12">
                <div class="text-center">
                    <b-button variant="primary" @click="saveInfo" :disabled="loading">
                        <div v-if="loading">
                            <b-spinner small></b-spinner>
                            保存中...
                        </div>
                        <span v-else="loading">保存</span>
                    </b-button>
                    <b-button variant="secondary" @click="closeModel" :disabled="loading">返回</b-button>
                </div>
            </div>
        </template>
    </b-modal>
</div>
<div class="footerPage"></div>
</body>
</html>
